import React, { Component } from 'react'
import axios from '../../utils/request'
import Cookies from 'js-cookie'
import { Form, Input, Button, message } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './login.less'

export default class Login extends Component {

    onFinish = (values) => {
        let user = {
            email: "",
            mobile: "",
            spass: values.password,
        };
        /^[0-9]*$/.test(values.username) ? user.mobile = values.username : user.email = values.username ;
        axios.post("/user/login", user).then((response) => {
            let res = response.data.data;
            if (response.data.code == 200) {
                let user = res;
                Cookies.set("token", res.token, { expires: 365 });
                Cookies.set("user", user, { expires: 365 });
                // this.$router.push({ name: "erpIndex" });
                message.success('This is a success Login');
            } else {
                message.error(response.data.msg);
            }
        });
    }

    render() {
        return (
            <div className="container">
                <div className="left">
                    <div className="logo" />
                </div>
                <div className="right">
                    <div className="loginContent">
                        <div className="loginLog" />
                        <div className="loginText">
                            <div className="txt1">Hello!</div>
                            <div className="txt2">Welcome to Humboldt Technology!</div>
                            <div className="form">
                                <Form name="basic" name="normal_login" className="login-form" initialValues={{ remember: true }} onFinish={this.onFinish}>
                                    <Form.Item name="username" rules={[{ required: true, message: 'Please input your username!' }]}>
                                        <Input ref={ c => this.tel = c} prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入邮箱/手机号" />
                                    </Form.Item>
                                    <Form.Item name="password" rules={[{ required: true, message: 'Please input your password!' }]} >
                                        <Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="请输入密码" />
                                    </Form.Item>
                                    <Form.Item>
                                        <a className="login-form-forgot" href="">忘记密码</a>
                                    </Form.Item>
                                    <Form.Item>
                                        <Button type="primary" htmlType="submit" className="login-form-button">
                                            登录
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
